@import 'styles/settings';

$spacer-edge-opacity: 0;
$spacer-middle-opacity: 0.6;
$icon-size: 14px;
$share-button-margin: 12px;
$menuFooterHeight: 65px;
$landscapeSidebarCollapsedHeight: 175px;
$scrollbar-width: 4px;

.halfEarthLogoTopLeft {
  position: absolute;
  height: $he-project-logo-size;
  top: $layout-top-margin;
  left: $site-gutter;
  z-index: $bring-to-front;
}

.uiTopLeft {
  position: absolute;
  top:  $ui-left-top;
  left: $site-gutter;
}

.uiBottom {
  position: absolute;
  bottom: $menuFooterHeight;
  width: 100%;
}

@mixin topLeft() {
  position: absolute;
  top:  $ui-left-top;
  left: $site-gutter;
}

@mixin bottom() {
  position: absolute;
  bottom: $menuFooterHeight;
  width: 100%;
}

.uiRight {
  position: absolute;
  right: 0;
}

@mixin backdropBlur($colour: rgba(9, 20, 26, 0.4), $fallback: $space-background, $fallbackOpacity: 0.7) {
  background-color: rgba($fallback, $fallbackOpacity);

  @supports ((-webkit-backdrop-filter: blur($blur-level)) or (backdrop-filter: blur($blur-level))) {
      background-color: $colour;
      -webkit-backdrop-filter: blur($blur-level);
      backdrop-filter: blur($blur-level);
  }
}

%spacer {
  height: 1px;
  background-image: linear-gradient(to right, rgba($alto, $spacer-edge-opacity), rgba($white, $spacer-middle-opacity), rgba($alto, $spacer-edge-opacity))
}

.closeButton {
  color: $white;
  position: fixed;
  right: calc(2 * #{$site-gutter});
  top: calc(2 * #{$site-gutter});
  z-index: 100001;

  svg {
    fill: $oslo-gray;
    height: 22px;
    stroke: $oslo-gray;
    width: 22px;
  }

  &:hover svg {
    fill: $white;
    stroke: $white;
  }

}

%verticalScrollbar {
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: $scrollbar-width;
    background-color: rgba($wild-sand, 0.2);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: $alto;
  }
}

%icon {
  height: $icon-size;
  width: $icon-size;
}
